<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="#fff">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #343a45;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center"></view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <!-- 页面主体 -->
    <view class="grace-body">
      <view class="ml-40 mr-40">
        <view class="grace-center" style="margin-top: 40rpx;">
          <image src="/static/logo.png" mode="widthFix" class="logo" />
        </view>
        <view style="padding-top: 80rpx; ">
          <graceNavBar
            v-if="only === false"
            :items="navs"
            :size="160"
            lineHeight="30rpx"
            :isCenter="true"
            :currentIndex="currentNavIndex"
            activeDirection="center"
            padding="10rpx"
            activeLineBg="#6482F5"
            textAlign="center"
            activeColor="#6482F5"
            :activeLineWidth="currentNavIndex == 0 ? '110rpx' : '138rpx'"
            activeLineHeight="4rpx"
            color="#333333"
            :margin="10"
            @change="navChange"
          ></graceNavBar>
        </view>
        <view style="margin-top: 40rpx;">
          <cloudRegisterUsername v-if="isUsernameRegister" />
          <cloudRegisterMobile v-if="isMobileRegister" />
          <cloudRegisterEmail v-if="isEmailRegister" />
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      currentNavIndex: 0,
      only: false // navs的index(指定登录方式), 或者false(多种登录方式)
    };
  },

  computed: {
    isUsernameRegister() {
      return (
        (this.only === false && this.currentNavIndex == 0) || this.only === 0
      );
    },
    isMobileRegister() {
      return (
        (this.only === false && this.currentNavIndex == 1) || this.only === 1
      );
    },
    isEmailRegister() {
      return (
        (this.only === false && this.currentNavIndex == 2) || this.only === 2
      );
    },
    navs() {
      return [
        this.$t("account.register.title"),
        this.$t("account.register.mobile_register"),
        this.$t("account.register.mail_register")
      ];
    }
  },
  methods: {
    navChange(index) {
      this.currentNavIndex = index;
    }
  }
};
</script>

<style scoped>
page {
  background: #fff;
}
.logo {
  width: 337rpx;
  height: 50rpx;
}
</style>
